<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column" v-show="wxAdmin == 1" >
					<view class="title">姓名</view>
					<uni-combox :candidates="candidates" placeholder="选择姓名" v-model="forms.leaveUser"></uni-combox>
				</view>
				<view class="uni-form-item uni-column uni-btn-v" >
					<view class="title" >日期</view>
					<view class="tag-view">
						<uni-tag :inverted="true" :text="forms.date" type="primary" />
					</view>
					<!-- <uni-easyinput v-model="forms.date" @focus="openCalendar" /> -->
					<button type="primary" @click="openCalendar">打开日历</button>
					<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="dateInfo.date" :insert="dateInfo.insert" 
							 :lunar="dateInfo.lunar" :startDate="dateInfo.startDate"
							 :endDate="dateInfo.endDate" :range="dateInfo.range" @confirm="confirm" @close="close"/>
				</view>
				
				<view class="uni-btn-v">
					<button form-type="submit">提交</button>
					<button type="default" form-type="reset">清空</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import graceChecker from "@/js/common/graceChecker"
	import {doNavigationBarTitle} from '@/js/navigatePage'
	import {insertWxLeave,getLeaveUserWx} from '@/js/api/leaveApi'

	import {mapGetters} from 'vuex'
	export default {
		components:{},
		data() {
			return {
				candidates:[],
				leaveUsers: [],
				forms:{
					leaveUser:'',
					beforeDate:'',
					afterDate:'',
					leaveDate:'',
					date:''
				},
				dateInfo: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
					startDate: '',
					endDate: '',
					date:''
				}
			}
		},
		onReady() {
			doNavigationBarTitle('新增请假','#6495ED');
		},
		mounted() {
			this.getLeaveUser()
		},
		computed:{
			...mapGetters({wxAdmin:'login/wxAdmin'})
		},
		methods: {
			async formSubmit(e) {
				
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"beforeDate", checkType : "notnull", checkRule:"",  errorMsg:"请假日期不能为空"}
                ];
				if(this.wxAdmin == 1){
					rule.push(
					{name:"leaveUser", checkType : "notnull", checkRule:"",  errorMsg:"姓名不能为空"})
				}
                //进行表单检查
                var checkRes = graceChecker.check(this.forms, rule);
				console.log(this.forms)
                if(checkRes){
					let wxLeave = await insertWxLeave(this.forms)
                    uni.showToast({title:"操作成功!", icon:"none"});
					this.getLeaveUser()
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			openCalendar(){
				this.$refs.calendar.open()
			},
			close(){
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e)
				debugger
				this.forms.beforeDate = e.range.before;
				this.forms.afterDate = e.range.after;
				
				let leaveDate = '日期: ';
				
				if(this.forms.beforeDate){
					leaveDate = leaveDate+ this.forms.beforeDate
				}
				if(this.forms.afterDate){
					leaveDate = leaveDate+' 至 '+this.forms.afterDate
				}
				this.forms.date = leaveDate
			},
			async getLeaveUser(){
				const leaveusers = await getLeaveUserWx({})
				this.candidates = leaveusers.data
				console.log('candidates ',this.candidates)
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
		width: 80rpx;
	}
</style>
